<template>
  <div>
    <h3>文章展示页面</h3>
    <p>{{obj}}</p>
    {{art}}
    <table style="width:800px; margin:0 auto">
        <tr>
            <td>编号</td>
            <td>文章名</td>
            <td>作者</td>
            <td>文章内容</td>
            <td>所属种类名</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,i) in art" :key="i">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.author}}</td>
            <td>{{item.contemt}}</td>
            <td>{{item.typea_name}}</td>
            <td>
                <button @click="update_list={...item}">编辑</button>
                <button @click="delOne(item.id)">删除</button>
                <button @click="pinlun(item.id)">发布评论</button>
            </td>
        </tr>
    </table>
    <div>
        <input type="text" v-model="name"> <button @click="searchL">搜索</button>
        {{search_list}}
    </div>

    <h4>创建文章</h4>
    <div> 文章名：<input type="text" v-model="add_list.name">  </div>
    <div> 作者：<input type="text" v-model="add_list.author">  </div>
    <div> 文章：<input type="text" v-model="add_list.content">  </div>
    <div> 所属 种类：
    
       <select v-model="add_list.typea">
            <option :value="item.id" v-for="(item,i) in type" :key="i">{{item.name}}</option>
       </select>
     </div>
    <div> <button @click="add">创建</button>  </div>



    <h4>编辑文章</h4>
    <div> 文章名：<input type="text" v-model="update_list.name">  </div>
    <div> 作者：<input type="text" v-model="update_list.author">  </div>
    <div> 文章：<input type="text" v-model="update_list.content">  </div>
    <div> 所属 种类：
    
        <select v-model="update_list.typea">
            <option :value="item.id" v-for="(item,i) in type" :key="i">{{item.name}}</option>
       </select>
     </div>
    <div> <button @click="updateO">编辑</button>  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            obj:this.$route.params.id,
            art:[],
            add_list:{name:'',author:'',content:'',typea:1},
            update_list:{},
            name:'',
            search_list:{},
            type:''
        }
    },
    mounted(){
        this.getArt()
        this.getType()
    },
    methods:{
        getType(){
            axios.get('type/')
            .then(resp=>{
                console.log(resp);
                this.type=resp.data
            })
            .catch(err=>{
                console.log(err);
            })
        },
        getArt(obj){
            axios.get('art/'+this.obj)
            .then(resp=>{
                console.log(resp);
                this.art=resp.data
            })
            .catch(err=>{
                console.log(err);
            })
        },
        add(){
            let user=this.$store.state.user_id
            if(!user){
                alert('请登录')
                this.$router.push('/login')
                return
            }
            axios.post('con/',this.add_list)
            .then(resp=>{
                console.log(resp);
                alert('添加成功')
                this.getArt()
            })
            .catch(err=>{
                console.log(err);
            })
        },
        updateO(){
            axios.put('aet/'+this.update_list.id+'/',this.update_list)
            .then(resp=>{
                console.log(resp);
                alert('修改成功')
                this.getArt()
            })
            .catch(err=>{
                console.log(err);
            })
        },
        delOne(item){
            axios.delete('aet/'+item+"/")
            .then(resp=>{
                console.log(resp);
                alert('删除成功')
                this.getArt()
            })
            .catch(err=>{
                console.log(err);
            })
        },
        pinlun(art){
            let user=this.$store.state.user_id
            if(!user){
                alert('请登录')
                this.$router.push('/login')
                return
            }
            axios.post('connn/',{user:user,art:art})
            .then(resp=>{
                console.log(resp);
                alert('发布评论成功')
                this.$router.push('/show')
                this.getArt()
            })
            .catch(err=>{
                console.log(err);
            })
        },
        searchL(){
            axios.get('search/?name='+this.name)
            .then(resp=>{
                console.log(resp);
                this.search_list=resp.data
            })
            .catch(err=>{
                console.log(err);
            })
        }
        
    }
}
</script>

<style>

</style>